<template>
  <div class="time-wrapper">
    <el-row class="container">
      <div class="title">时段：</div>
      <el-time-select v-model="startTime" :editable="false" placeholder="起始时间" :picker-options="{ start: '00:00', step: '00:30', end: '23:30'}" />
      <el-time-select v-model="endTime" :editable="false" style="margin-left: 10px" placeholder="结束时间" :picker-options="{ start: '00:00', step: '00:30', end: '23:30' }" />
      <el-button type="primary" style="margin-left: 10px" class="btn" @click="handleAddTimer">新增</el-button>
      <el-button type="primary" style="margin-left: 10px" class="btn" @click="handleDeleteTimer">删除</el-button>
    </el-row>
    <el-row class="container timer">
      <div v-for="(item, index) of arrival_hours" :key="index" class="timer-item">
        <el-checkbox v-model="item.check" :label="item.name" border />
      </div>
    </el-row>
    <el-button type="primary" @click="handleSave">保存</el-button>
  </div>
</template>
<script>
import { getRoomTime, postRoomTime } from '@/api/params'
export default {
  name: 'ParamsHotelTimeFrame',
  data() {
    return {
      arrival_hours: [],
      startTime: '',
      endTime: ''
    }
  },
  created() {
    this.initTimeSolt()
  },
  methods: {
    // 初始化时段
    async initTimeSolt() {
      const res = await getRoomTime()
      const { arrival_hours } = res.data.config
      let array
      if (arrival_hours.length) {
        array = JSON.parse(arrival_hours)
      } else {
        array = []
      }
      const result = []
      array.map((item) => {
        result.push({ name: item, check: true })
      })
      this.arrival_hours = result
    },
    // 增加时段
    handleAddTimer() {
      const { startTime, endTime } = this
      if (startTime.trim() === '' || endTime.trim() === '') {
        this.$message.warning({
          message: '开始时间段或者结束时间段不能为空',
          duration: 1000
        })
        return
      } else {
        this.arrival_hours.push({ name: `${startTime} ~ ${endTime}`, check: true })
        this.startTime = ''
        this.endTime = ''
      }
    },
    // 删除时段
    handleDeleteTimer() {
      const time = this.arrival_hours
      for (let index = time.length - 1; index >= 0; index--) {
        if (time[index].check) {
          time.splice(index, 1)
        }
      }
    },
    // 改变时段格式
    validityTimeSolt(array) {
      const result = []
      array.map((item) => {
        result.push(item.name)
      })
      return result
    },
    handleSave() {
      this.validity()
    },
    async validity() {
      const type = 'times'
      const arrival_hours = this.validityTimeSolt(this.arrival_hours)
      await postRoomTime({ type, arrival_hours: JSON.stringify(arrival_hours) })
      this.$message.success({
        message: '保存成功',
        duration: 1000
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.time-wrapper {
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  .container {
    width: 100%;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    .title {
      width: 140px;
    }
    .input-container{
      width: 300px;
    }
  }
  .timer {
    display: flex;
    flex-wrap: wrap;
    padding-left: 140px;
    box-sizing: border-box;
  }
  .timer-item{
    margin-right: 20px;
    margin-bottom: 10px;
  }
}
</style>
